import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Dimensions,
    Text,
    View,
    TouchableOpacity,
    ImageBackground,
    Image,
    Platform,
    TextInput
} from 'react-native';
import AndroidModule from '../../../../utils/AndroidConnent'
import { getImgUrl } from '../../../../utils/ComFunction'


const isIos = Platform.OS == 'ios';
const screenW = Dimensions.get('window').width;

export default class PublishCarDisplacement extends Component {

    constructor(props) {
        super(props);
        this.state = {

        }
    };

    componentDidMount() {

    }


    render() {
        return (
            <View style={styles.itemBox}>
                <View style={styles.itemLeftBox}>
                    <Text style={styles.itemTitleText}>
                        {'排量'}
                        <Text style={{ color: '#FB3D3C' }}>*</Text>
                    </Text>
                </View>
                <View style={styles.itemRightBox}>
                    <TextInput
                        keyboardType={'decimal-pad'}
                        autoCorrect={false}
                        editable={true}
                        returnKeyType='done'
                        autoCapitalize='characters'
                        style={styles.textInput}
                        placeholder={'请输入排量'}
                        placeholderTextColor="#999999"
                        value={this.props.displacement}
                        onChangeText={this.changeText.bind(this)}
                    />
                    <View style={styles.displacementBox}>
                        <TouchableOpacity
                            style={[styles.displacementLeftBox,{backgroundColor: this.props.turbo != 1 ? '#fff':'rgba(0,0,0,0)'}]}
                            onPress={()=>{
                                if (this.props.onChangeTurbo) {
                                    this.props.onChangeTurbo(0)
                                }
                            }}
                        >
                            <Text style={styles.displacementText}>L</Text>
                        </TouchableOpacity>
                        <TouchableOpacity
                            style={[styles.displacementRightBox,{backgroundColor: this.props.turbo == 1 ? '#fff':'rgba(0,0,0,0)'}]}
                            onPress={()=>{
                                if (this.props.onChangeTurbo) {
                                    this.props.onChangeTurbo(1)
                                }
                            }}
                        >
                            <Text style={styles.displacementText}>T</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        )
    }

    //输入框内容输入
    changeText(val) {
        if (this.props.onChangeText) {
            this.props.onChangeText(val)
        }
    }

}

const styles = StyleSheet.create({
    itemBox: {
        width: '100%',
        height: 45,
        borderBottomColor: '#e4e4e4',
        borderBottomWidth: 0.3,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    itemLeftBox: {
        width: 92,
    },
    itemRightBox: {
        flex: 1,
        height: '100%',
        marginLeft: 4,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center'
    },
    itemTitleText: {
        fontSize: 14,
        color: '#222222'
    },
    textInput: {
        color: '#333333',
        fontSize: 14,
        flex: 1,
        height: '100%',
    },
    displacementBox: {
        width: 80,
        height: 29,
        backgroundColor: '#EEEEEE',
        borderRadius: 6,
        flexDirection: 'row',
        alignItems: 'center',
        padding: 2,
    },
    displacementLeftBox: {
        height: '100%',
        flex: 1,
        borderTopLeftRadius: 6,
        borderBottomLeftRadius: 6,
        backgroundColor: '#fff',
        justifyContent: 'center',
        alignItems: 'center'
    },
    displacementRightBox: {
        height: '100%',
        flex: 1,
        borderTopRightRadius: 6,
        borderBottomRightRadius: 6,
        backgroundColor: '#fff',
        justifyContent: 'center',
        alignItems: 'center'
    },
    displacementText: {
        color: '#222222',
        fontSize: 15
    }

})